<template>
  <div class="home">
      <div class="header">
        <div class="header-left">
          <div class="header-center-left">
            <div class="image">
              <img  src="../../public/img/vite.svg" alt="">
            </div>
            <div class="header-text">google_logo Pay</div>
          </div>
          <div class="header-center-right">
            <div class="small-center">
              Trò chơi
            </div>
            <div class="small-center" style="color: #01875F;">
              ứng dụng
              <div class="span"></div>
            </div>
            <div class="small-center">
              Phim
            </div>
            <div class="small-center">
              Sách
            </div>
            <div class="small-center">
              Những đứa trẻ
            </div>
          </div>
        </div>
        <div class="header-right">
          <div class="right-center">
            <img src="../../public/img/1.png" alt="">
          </div>
          <div class="right-center">
            <img src="../../public/img/2.png" alt="">
          </div>
          <div class="right-center">
            
          </div>
        </div>
      </div>
      <div class="center-max">
        <div class="center">
          <div class="center-top">
            <div class="center-top-left">
              <div class="left-top">
                <div class="title">Fortune Tiger PG</div>
                <div>
                  <div class="title-next">Fortune Tiger PG</div>
                <div class="title-to">Chứa quảng cáo Mua hàng trong ứng dụng</div>
                </div>
                
              </div>
              <div class="left-middle">
                <div class="middle-box">
                  <div class="box-left">
                    <div class="num">4,8 star</div>
                    <div class="text">66k đánh giá</div>
                  </div>
                  <div class="box-right"></div>
                </div>
                <div class="middle-box">
                  <div class="box-left">
                    <div class="num">200 dặm+</div>
                    <div class="text">Tải xuống</div>
                  </div>
                  <div class="box-right"></div>
                </div>
                <div class="middle-box">
                  <div class="box-left">
                    <div class="num"><img src="../../public/img/5.png" alt=""></div>
                    <div class="text">Phân loại miễn phí info</div>
                  </div>
                  <div class="box-right" v-show="false"></div>
                </div>
              </div>
              <div class="left-bottom">
                <div class="box-button1">
                  Cài đặt
                </div>
                <div class="box-button2">
                  <div class="button2-left"><img src="../../public/img/7.png" alt=""></div>
                  <div class="button2-text">Chia sẻ</div>
                </div>
                <div class="box-button3">
                  <div class="button3-left"><img src="../../public/img/8.png" alt=""></div>
                  <div class="button3-text">Thêm vào danh sách mong muốn</div>
                </div>
              </div>
            </div>
            <div class="center-top-right">
              <img class="iconimg" src="../../public/img/icon.jpg" alt="">
            </div>
          </div>
          <div class="center-titt">
            <div class="titt-img">
              <img src="../../public/img/9.png" alt="">
            </div>
            <div class="titt-text">Ứng dụng này có sẵn cho tất cả các thiết bị của bạn</div>
          </div>
          <div class="center-content">
            <div class="content-image">
              <img class="image" src="../../public/img/1.jpg" alt="">
              <img class="image" src="../../public/img/2.jpg" alt="">
              <img class="image" src="../../public/img/3.jpg" alt="">
              <img class="image" src="../../public/img/4.jpg" alt="">
            </div>
            <div class="content-button" >
              <img src="../../public/img/10.png" alt="">
            </div>
          </div>
          <div class="center-about">
              <div class="about-top">
                <div class="about-top-left">Về trò chơi này</div>
                <div class="about-img">
                  <img src="../../public/img/11.png" alt="">
                </div>
              </div>
              <div class="about-bottom">Thử thách vận may của bạn tại Vietnam Slots và xem liệu bạn có thể thắng lớn trên guồng quay hay không.</div>
              <div class="about-footer">
                <div class="footer-top">Đã cập nhật</div>
                <div class="footer-bottom">ngày 30 tháng 9 2023</div>
              </div>
          </div>
          <div class="center-lin">
            <div class="lin-box">Sòng bạc</div>
            <div class="lin-box">Máy đánh bạc</div>
            <div class="lin-box">Bình thường</div>
            <div class="lin-box">Một người chơi</div>
            <div class="lin-box">cách điệu</div>
            <div class="lin-box">Ngoại tuyến</div>
          </div>
          <div class="center-about-to">
              <div class="about-to-top">
                <div class="about-top-left">Bảo mật dữ liệu</div>
                <div class="about-img">
                  <img src="../../public/img/11.png" alt="">
                </div>
              </div>
              <div class="about-to-middle">Bảo mật của bạn bắt đầu bằng việc hiểu cách các nhà phát triển thu thập và chia sẻ dữ liệu của bạn. Các biện pháp bảo mật và quyền riêng tư dữ liệu có thể khác nhau tùy theo mức độ sử dụng, khu vực và độ tuổi. Nhà phát triển đã cung cấp thông tin sau, thông tin này có thể được cập nhật theo thời gian.</div>
              <div class="about-to-bottom">
                <div class="bottom-box">
                  <img src="../../public/img/12.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">Ứng dụng này có thể chia sẻ những loại dữ liệu này với bên thứ ba</div>
                    <div class="text-lin2">Địa phương</div>
                  </div>
                </div>
                <div class="bottom-box">
                  <img src="../../public/img/13.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">Không có dữ liệu nào được thu thập</div>
                    <div class="text-lin2"><a class="a">Tìm hiểu thêm</a> về cách nhà phát triển khai báo bộ sưu tập</div>
                  </div>
                </div>
                <div class="bottom-box">
                  <img src="../../public/img/14.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">Dữ liệu không được mã hóa</div>
                  </div>
                </div>
                <div class="bottom-box" style="margin-bottom: 5px;">
                  <img src="../../public/img/15.png" alt="">
                  <div class="box-text">
                    <div class="text-lin1">Bạn có thể yêu cầu xóa dữ liệu</div>
                  </div>
                </div>
                <div class="bottom-button">xem chi tiết</div>
              </div>
          </div>
          <div class="center-review">
            <div class="review-top">
              <div class="review-left">
                <div class="about-top-left">Xếp hạng và đánh giá</div>
                <div class="about-img">
                  <img src="../../public/img/11.png" alt="">
                </div>
              </div>
              <div class="review-right">
                <div class="review-right-text">Điểm số và đánh giá được kiểm tra</div>
                <div class="review-right-img"><img src="../../public/img/16.png" alt=""></div>
              </div>
            </div>
            <div class="review-bottom">
              <div class="review-box" style="background-color: #E6F3EF;">
                <div class="box-img">
                  <img src="../../public/img/19.png" alt="">
                </div>
                <div class="review-text">Điện thoại</div>
              </div>
              <div class="review-box">
                <div class="box-img">
                  <img src="../../public/img/17.png" alt="">
                </div>
                <div class="review-text">Viên thuốc</div>
              </div>
              <div class="review-box" >
                <div class="box-img">
                  <img src="../../public/img/18.png" alt="">
                </div>
                <div class="review-text">Chromebook</div>
              </div>
            </div>
            <div class="review-mark">
              <div class="mark-left">
                <div class="mark-left-num">4,8</div>
                <div class="mark-left-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="mark-left-text">66 nghìn lượt đánh giá</div>
              </div>
              <div class="mark-right">
                <div class="mark-right-box">
                  <div class="box-num">5</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 90%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">4</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 70%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">3</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 65%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">2</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 30%;"></div>
                  </div>
                </div>
                <div class="mark-right-box">
                  <div class="box-num">1</div>
                  <div class="mark-max">
                    <div class="mark" style="width: 10%;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="center-message">
            <div class="message-box">
              <div class="message-top">
                <div class="top-left">
                  <div class="left-tou">i</div>
                  <div class="left-text">isa bán hàng</div>
                </div>
                <div class="top-right"><img src="../../public/img/20.png" alt=""></div>
              </div>
              <div class="message-sing">
                <div class="sing-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="sing-text">Ngày 1 tháng 6 năm 2023</div>
              </div>
              <div class="message-textPro">Niềm vui sẽ được trả bằng một khoản giảm giá nhỏ qua pix, điều này đã xảy ra với tôi trong lần rút tiền đầu tiên.</div>
              <div class="message-text">Đánh giá này được 59 người đánh dấu là hữu ích</div>
              <div class="message-change">
                <div class="change-left">Tìm thấy điều này hữu ích không bạn?</div>
                <div class="change-right">
                  <div class="button">Đúng</div>
                  <div class="button">KHÔNG</div>
                </div>
              </div>
            </div>
            <div class="message-box">
              <div class="message-top">
                <div class="top-left">
                  <div class="left-tou" style="background: #00877A;">c</div>
                  <div class="left-text">Caio Silva</div>
                </div>
                <div class="top-right"><img src="../../public/img/20.png" alt=""></div>
              </div>
              <div class="message-sing">
                <div class="sing-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="sing-text">Ngày 5 tháng 6 năm 2023</div>
              </div>
              <div class="message-textPro">Tôi đã giành được 1000000 VND và khi tôi nạp tiền vào tài khoản của mình thì chưa đầy 1 phút, tôi khuyên bạn nên làm như vậy!!!!!!</div>
              <div class="message-text">Đánh giá này được 29 người đánh dấu là hữu ích</div>
              <div class="message-change">
                <div class="change-left">Tìm thấy điều này hữu ích không bạn?</div>
                <div class="change-right">
                  <div class="button">Đúng</div>
                  <div class="button">KHÔNG</div>
                </div>
              </div>
            </div>
            <div class="message-box">
              <div class="message-top">
                <div class="top-left">
                  <div class="left-tou" style="overflow: hidden;">
                    <img src="../../public/img/32.webp" alt="">
                  </div>
                  <div class="left-text">Oséias Pereira Flausino</div>
                </div>
                <div class="top-right"><img src="../../public/img/20.png" alt=""></div>
              </div>
              <div class="message-sing">
                <div class="sing-img"><img src="../../public/img/21.png" alt=""></div>
                <div class="sing-text">Ngày 28 tháng 2 năm 2023</div>
              </div>
              <div class="message-textPro">Thực sự trả tiền Tôi đã thực hiện nhiều lần rút tiền và tiền sẽ vào tài khoản sau vài giây Siêu trung thực</div>
              <div class="message-text">Đánh giá này được 40 người đánh dấu là hữu ích</div>
              <div class="message-change">
                <div class="change-left">Tìm thấy điều này hữu ích không bạn?</div>
                <div class="change-right">
                  <div class="button">Đúng</div>
                  <div class="button">KHÔNG</div>
                </div>
              </div>
              <div class="message-button">Xem tất cả đánh giá</div>
              <div class="message-finally">
                <div class="finally-tittle">Có gì mới</div>
                <div class="text-box">
                  <div class="finally-text">Xin chào những người yêu thích Tycoon, phiên bản mới đã đến! Dưới đây là một số bất ngờ dành cho bạn!</div>
                  <div class="finally-text">- Trò chơi mới: Fortune Tiger PG sử thi</div>
                  <div class="finally-text">- Hoạt động mới</div>
                  <div class="finally-text">- Đã sửa lỗi</div>
                  <div class="finally-text">Bây giờ là lúc quay và giành chiến thắng!</div>
                </div>
                <div class="finally-bottom">
                  <div class="finally-img"><img src="../../public/img/22.png" alt=""></div>
                  <div class="finally-text">Gắn cờ là không phù hợp</div>
                </div>
                <div class="line"></div>
              </div>
            </div>
          </div>
          <div class="footer">
            <div class="footer-top">
              <div class="top-left">
                <div class="button">Google Play</div>
                <div class="button changecolor">Chơi thẻ</div>
                <div class="button changecolor">Điểm chơi</div>
                <div class="button changecolor">Thẻ quà tặng</div>
                <div class="button changecolor">Giải thoát</div>
                <div class="button changecolor">Chính sách hoàn tiền</div>
              </div>
              <div class="top-right">
                <div class="button">Trẻ em và gia đình</div>
                <div class="button changecolor">Hướng dẫn gia đình</div>
                <div class="button changecolor">Chia sẻ gia đình</div>
              </div>
            </div>
            <div class="footer-bottom">
                <div class="bottom-left">
                  <div class="button">Điều khoản dịch vụ</div>
                  <div class="button">Sự riêng tư</div>
                  <div class="button">Giới thiệu về Google Play</div>
                  <div class="button">Nhà phát triển</div>
                  <div class="button">Cửa hàng Google</div>
                  <div class="button">Tất cả giá đã bao gồm thuế.</div>
                </div>
                <div class="bottom-right">
                  <img class="image" src="../../public/img/brazil.png" alt="">
                  <div class="right-text">Hoa Kỳ (Tiếng Việt)</div>
                </div>
            </div>
          </div>
          <div style="height: 20px;"></div>
        </div>
        
        
      </div>
      
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref } from "vue";
  import { ElMessage } from "element-plus";

  // const router = useRouter()
  // const official = ref(false)
  // const loginFormRef = ref()
  // const loginForm = reactive({
  //   username: 'admin',
  //   password: 'mini@123456'
  // })
</script>

<style scoped lang="scss">
  .home{
    
    .header{
      position: fixed;
      top:0;
      width: 100%;
      height: 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-left{
        width: 710px;
        height: 64px;
        display: flex;
        align-items: center;
        .header-center-left{
          margin-left: 20px;
          width: 246px;
          display: flex;
          align-items: center;
          .image{
            width: 45px;
          }
          .header-text{
            height: 28px;
            line-height: 28px;
            color: #5f6368;
            font-size: 22px;
            margin-left: 5px;
          }
        }
        .header-center-right{
          margin-left: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .small-center{
            font-size: 14px;
            color: #5f6368;
            padding: 21px 15px;
            position: relative;
            .span{
              background: #01875F;
              height: 3px;
              width: 60px;
              position: absolute;
              top:58px
            }
          }
        }
      }
      .header-right{
        margin-right: 20px;
        display: flex;
        align-items: center;
        .right-center{
          width: 48px;
          height: 48px;
          border-radius: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .right-center:hover{
          background-color: #F5F5F5;
          cursor: pointer;
        }
      }
    }
    .center-max{
      height: 900px; /* 设置容器的高度 */
      overflow-y: scroll; /* 显示垂直滚动条 */
      margin-top: 64px;
      width: 100%;
      display: flex;
      justify-content: center;
      .center{
        height: 100%;
        width: 1300px;
        .center-top{
          margin-top: 45px;
          display: flex;
          justify-content: space-between;
          height: 280px;
          .center-top-left{
            width: 800px;
            height: 100%;
            .left-top{
              height: 120px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .title{
                font-weight: 500;
              height: 64px;
              line-height: 64px;
              font-size: 56px;
              color: #202124;
            }
            .title-next{
              color: #01875F;
              font-size: 16px;
            }
            .title-to{
              color: #5f6368;
              font-size: 12px;
            }
            }
            .left-middle{
              width: 100%;
              height: 44px;
              display: flex;
              margin: 30px 0;
              .middle-box{
                width: 140px;
                height: 44px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .box-left{
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  .num{
                    font-size: 14px;
                    color: #202124;
                  }
                  .text{
                    font-size: 12px;
                    color: #5f6368;
                  }
                }
                .box-right{
                  height: 22px;
                  width: 1px;
                  background-color: #e8eaed;
                }
              }
            }
            .left-bottom{
              margin-top: 35px;
              height: 48px;
              display: flex;
              align-items: center;
              .box-button1{
                width: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 10px;
                background-color: #01875F;
                border-radius: 10px;
                color: #F5F5F5;
              }
              .box-button1:hover{
                background-color: #095943;
              }
              .box-button2:hover{
                background-color: #F6FAFE;
                border-radius: 5px;
              }
              .box-button3:hover{
                background-color: #F6FAFE;
                border-radius: 5px;
              }
              .box-button2{
                display: flex;
                padding: 0 10px;
                align-items: center;
                width: 130px;
                height: 48px;
                color: #01875F;
                margin: 0 20px;
                .button2-text{
                  margin-left: 10px;
                  font-size: 14px;
                }
              }
              .box-button3{
                padding: 0 10px;
                display: flex;
                align-items: center;
                width: 273px;
                height: 48px;
                color: #01875F;
                .button3-text{
                  margin-left: 10px;
                  font-size: 14px;
                }
              }
            }
          }
          .center-top-right{
            width: 240px;
            height: 240px;
          }
        }
        .center-titt{
          margin-top: 20px;
          display: flex;
          align-items: center;
          .titt-text{
            margin-left: 10px;
            font-size: 14px;
            color: #5f6368;
          }
        }
        .center-content{
          margin-top: 70px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 880px;
          .content-image{
            display: flex;
            justify-content: space-between;
            width: 710px;
            .image{
              width: 165px;
              height: 295px;
              border-radius: 10px;
            }
          }
          .content-button{
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: #FFFFFF;
            box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
          }
          .content-button:hover{
            box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
            opacity: .8;
          }
        }
        .center-about{
          margin-top: 40px;
          display: flex;
          width: 860px;
          height: 140px;
          flex-direction: column;
          justify-content: space-between;
          .about-top{
            display: flex;
            .about-top-left{
              height: 40px;
              line-height: 40px;
              color: #202124;
              font-size: 22px;
            }
            .about-img{
              margin-left: 5px;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
            }
            .about-img:hover{
              background-color: #F5F5F5;
            }
          }
          .about-bottom{
            font-size: 14px;
            color: #5f6368;
          }
          .about-footer{
            display: flex;
            flex-direction: column;

            .footer-top{
              font-size: 14px;
              color: #202124;
            }
            .footer-bottom{
              font-size: 14px;
              color: #5f6368;
            }
          }
        }
        .center-lin{
          margin-top: 20px;
          display: flex;
          .lin-box{
            margin-right: 15px;
            padding: 5px 15px;
            border-radius: 50px;
            border: 1px solid #DADCE0;
            font-size: 14px;
            color: #5f6368;
          }
          .lin-box:hover{
            background-color: #F7F8F8;
            cursor: pointer;
          }
        }
        .center-about-to{
          margin-top: 40px;
          display: flex;
          width: 860px;
          height: 120px;
          flex-direction: column;
          justify-content: space-between;
          .about-to-top{
            display: flex;
            .about-top-left{
              height: 40px;
              line-height: 40px;
              color: #202124;
              font-size: 22px;
            }
            .about-img{
              margin-left: 5px;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
            }
            .about-img:hover{
              background-color: #F5F5F5;
            }
          }
          .about-to-middle{
            font-size: 14px;
            color: #5f6368;
          }
          .about-to-bottom{
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #DADCE0;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .bottom-box{
              height: 36px;
              margin-bottom: 18px;
              display: flex;
              align-items: center;
              .box-text{
                margin-left: 20px;
                color: #5f6368;
                .text-lin1{
                  font-size: 14px;
                }
                .text-lin2{
                  font-size: 12px;
                  .a{
                    text-decoration: underline;
                  }
                }
              }
            }
            .bottom-button{
              width: 110px;
              color: #01875F;
              padding: 10px;
              font-size: 14px;
              border-radius: 5px;
            }
            .bottom-button:hover{
              background-color: #F6FAFE;
              cursor: pointer;
            }
          }
        }
        .center-review{
          margin-top: 300px;
          width: 860px;
          .review-top{
            width: 860px;
            display: flex;
            justify-content: space-between;
            .review-left{
            display: flex;
              .about-top-left{
                height: 40px;
                line-height: 40px;
                color: #202124;
                font-size: 22px;
              }
              .about-img{
                margin-left: 5px;
                width: 40px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
              }
              .about-img:hover{
                background-color: #F5F5F5;
              }
          }
          .review-right{
            border-radius: 10px;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #5f6368;
            .review-right-img{
              margin-left: 5px;
            }
          }
          .review-right:hover{
            background-color: #F9F9F9;
          }
          }
          .review-bottom{
            margin-top: 20px;
            display: flex;
            .review-box{
              display: flex;
              align-items: center;
              border-radius: 50px;
              padding: 5px 20px;
              font-size: 14px;
              margin-right: 10px;
              border: 1px solid #DADCE0;
              .box-img{
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
              }
              .review-text{
                color: #01875F;
              }
            }
            .review-box:hover{
              background-color: #F5F5F5;
              cursor: pointer;
            }
          }
          .review-mark{
            margin-top: 20px;
            height: 109px;
            display: flex;
            justify-content: space-between;
            .mark-left{
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .mark-left-num{
                height: 64px;
                line-height: 64px;
                font-size: 56px;
                color: #202124;
              }
              .mark-left-img{
                margin-bottom: 10px;
              }
              .mark-left-text{
                color: #5f6368;
                font-size: 12px;
              }
            }
            .mark-right{
              width: 738px;
              display: flex;
              flex-direction: column;
              .mark-right-box{
                margin-bottom: 10px;
                display: flex;
                align-self: center;
                height: 10px;
                .box-num{
                  line-height: 10px;
                  width: 16px;
                  font-size: 12px;
                }
                .mark-max{
                  border-radius: 20px;
                  width: 715px;
                  background: #E8EAED;
                }
                .mark{
                  height: 10px;
                  border-radius: 20px;
                  background-color: #01875F;
                }
              }
            }
          }
        }
        .center-message{
          margin-top: 20px;
          width: 860px;
          display: flex;
          flex-direction: column;
          .message-box{
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            .message-top{
              height: 48px;
              display: flex;
              justify-content: space-between;
              .top-left{
                display: flex;
                align-items: center;
                .left-tou{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 50%;
                  color: #F5F5F5;
                  width: 32px;
                  height: 32px;
                  line-height: 32px;
                  background-color: #5D4239;
                }
                .left-text{
                  margin-left: 20px;
                  font-size: 14px;
                  color: #202124;
                }
              }
              .top-right{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 48px;
                height: 48px;
                border-radius: 50%;
              }
              .top-right:hover{
                background-color: #F5F5F5;
              }
            }
            .message-sing{
              margin-top: 20px;
              height: 20px;
              display: flex;
              align-items: center;
              .sing-text{
                margin-left: 10px;
                font-size: 12px;
                color: #5f6368;
              }
            }
            .message-textPro{
              margin-top: 10px;
              color: #5f6368;
              font-size: 14px;
            }
            .message-text{
              margin-top: 10px;
              color: #5f6368;
              font-size: 12px;
            }
            .message-change{
              margin-top: 10px;
              display: flex;
              align-items: center;
              height: 24px;
              .change-left{
                color: #5f6368;
                font-size: 12px;
              }
              .change-right{
                margin-left: 20px;
                width: 131px;
                color: #5f6368;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .button{
                  padding: 1px 15px;
                  border-radius: 50px;
                  border: 1px solid #DADCE0;
                }
                .button:hover{
                  background-color: #F5F5F5;
                  cursor: pointer;
                }
              }
            }
            .message-button{
              margin: 20px 0;
              width: 171px;
              color: #01875F;
              font-size: 14px;
              padding: 7px 5px;
              border-radius: 5px;
              
              cursor: pointer;
            }
            .message-button:hover{
              background: #F6FAFE;
            }
            .message-finally{
              margin-top: 20px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .finally-tittle{
                font-size: 22px;
                color: #202124;
              }
              .text-box{
                margin: 30px 0;
                font-size: 14px;
                color: #5f6368;
              }
              .finally-bottom{
                height: 20px;
                display: flex;
                align-items: center;
                .finally-text{
                  font-size: 14px;
                  color: #202124;
                  margin-left: 15px;
                }
              }
              .line{
                margin-top: 50px;
                background: #E8EAED;
                height: 1px;
                width: 1300px;
              }
            }
          }
        }
        .footer{
          margin-top: 40px;
          display: flex;
          flex-direction: column;
          .footer-top{
            height: 192px;
            display: flex;

            .top-left{
              width: 266px;
              display: flex;
              flex-direction: column;
              .button{
                height: 32px;
                font-size: 14px;
                color: #5f6368;
                line-height: 32px;
              }
              .changecolor:hover{
                color: #01875F;
                cursor: pointer;
              }
            }
            .top-right{
              margin-left: 10px;
              width: 1006px;
              display: flex;
              flex-direction: column;
              .button{
                height: 32px;
                font-size: 14px;
                color: #5f6368;
                line-height: 32px;
              }
              .changecolor:hover{
                color: #01875F;
                cursor: pointer;
              }
            }
          }
          .footer-bottom{
            margin-top: 25px;
            width: 1296px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .bottom-left{
              display: flex;
              justify-content: space-between;
              width: 800px;
              color: #5f6368;
              font-size: 12px;
            }
            .button:hover{
              color: #01875F;
              cursor: pointer;
            }
            .bottom-right{
              display: flex;
              .image{
                width: 24px;
                height: 18px;
              }
              .right-text{
                font-size: 12px;
                color: #5f6368;
                margin-left: 10px;
              }
            }
          }
        }
      }
      
    }
    
  }
  .iconimg{
    border-radius: 50px;
  }
</style>
